<template>
<div>
  <!-- 客户概况 -->
  <div style="width: 100%; height: 650px" id="myChart"></div>
</div>
</template>

<script>
export default {
  name: "profile",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
    };
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        legend: {},
        tooltip: {},
        dataset: {
          dimensions: ["product", "二十四小时内", "七天内", "三十天内","合计"],
          source: [
            { product: "客户管理", 二十四小时内: 43.3, 七天内: 85.8, 三十天内: 93.7, 合计:70 },
            { product: "联系人", 二十四小时内: 83.1, 七天内: 73.4, 三十天内: 55.1 , 合计:80},
            { product: "跟单管理", 二十四小时内: 86.4, 七天内: 65.2, 三十天内: 82.5 , 合计:60.2},
            { product: "订单管理", 二十四小时内: 72.4, 七天内: 53.9, 三十天内: 39.1 , 合计:30},
            { product: "合同管理", 二十四小时内: 72.4, 七天内: 53.9, 三十天内: 39.1 , 合计:90},
            { product: "售后管理", 二十四小时内: 72.4, 七天内: 53.9, 三十天内: 39.1 , 合计:99},
            { product: "订单管理", 二十四小时内: 72.4, 七天内: 53.9, 三十天内: 39.1 , 合计:76},
          ],
        },
        xAxis: { type: "category" },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [{ type: "bar" }, { type: "bar" }, { type: "bar" },{ type: "bar" }],
      });
    },
  },
};
</script>
<style lang="scss">
</style>